<template>
  <el-drawer
    :title="title"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
  >
    <template #default>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-form-item label="商品编号：">
              {{ form.goodsId }}
            </el-form-item>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-form-item label="商品名称：">
              {{ form.goodsName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="商品地址：">
            {{ form.goodsAddress }}
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-form-item label="商品分类：">
              {{ form.goodsClass }}
            </el-form-item>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-form-item label="商品金额：">
              {{ form.goodsSale }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-form-item label="上架时间：">
              {{ form.goodsPubDate }}
            </el-form-item></el-col
          >
          <el-col :lg="12" :sm="24">
            <el-form-item label="商品状态：">
              {{ form.goodsState }}
            </el-form-item></el-col
          >
        </el-row>
        <el-row>
          <el-form-item label="商品等级<br>\r\n评价：">
            {{ form.goodsStar }}
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="商品图片：">
            <el-image
              style="width: 100px; height: 30px"
              :src="form.goodsImg"
              fit="cover"
            ></el-image>
          </el-form-item>
        </el-row>
      </el-form>
      <br />
      <br />
      <el-descriptions :title="form.goodsName" :column="2" :border="true">
        <el-descriptions-item
          label="商品编号"
          label-align="right"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
        >
          {{ form.goodsId }}</el-descriptions-item
        >
        <el-descriptions-item label="商品名称" label-align="right"
          >{{ form.goodsName }}
        </el-descriptions-item>
        <el-descriptions-item label="商品地址" label-align="right" :span="2">{{
          form.goodsAddress
        }}</el-descriptions-item>

        <el-descriptions-item label="商品分类" label-align="right">
          <el-tag size="small"> {{ form.goodsClass }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商品金额" label-align="right">
          {{ form.goodsSale }}
        </el-descriptions-item>

        <el-descriptions-item label="上架时间" label-align="right">
          {{ form.goodsPubDate }}
        </el-descriptions-item>
        <el-descriptions-item label="商品状态" label-align="right">
          {{ form.goodsState }}
        </el-descriptions-item>
        <el-descriptions-item label="商品等级<br>\r\n评价" label-align="right">
          {{ form.goodsStar }}
        </el-descriptions-item>
        <el-descriptions-item label="商品图片" label-align="right">
          <el-image
            style="width: 100px; height: 30px"
            :src="form.goodsImg"
            fit="cover"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <el-button @click="state.dialogFormVisible = false">取消</el-button>
      <el-button @click="handleClose(true)" type="primary">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
    visible: boolean;
  }>(),
  {
    visible: false,
  }
);

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const state = reactive({
  dialogFormVisible: false,
});

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const form = ref({
  goodsId: "",
  goodsName: "",
  goodsAddress: "",
  goodsStar: "",
  goodsImg: "",
  goodsClass: [],
  goodsSale: "",
  goodsPubDate: "",
  goodsState: false,
});

const show = (row: any) => {
  //   console.log(form);
  form.value = row;
  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
